<template>
   <scroll-view scroll-y class="team-scroll">
  <view class="team">
    <pagehead>团队管理</pagehead>
    <view class="search">
        <image @click="search()" :src="IMAGE_STATIC + '/images/icon-search.png'" class="ico" mode="heightFix" />
        <input type="text" @confirm="init()" v-model="chooseObj.profit" placeholder="请输入成员姓名或手机号">
      </view>
    <view class="team-sort">
      <view>总计: {{ total }}人</view>
      <view class="right">
        <view class="" @tap.stop="changeSort">
          <text>交易量</text>
          <image v-if="sortType==''" :src="IMAGE_STATIC+'/images/upDown.png'" class="ico" mode="heightFix" />
          <image v-else-if="sortType=='asc'" :src="IMAGE_STATIC+'/images/upDown-1.png'" class="ico" mode="heightFix" />
          <image v-else-if="sortType=='desc'" :src="IMAGE_STATIC+'/images/upDown-2.png'" class="ico" mode="heightFix" />
        </view>
        <view class="" @tap.stop="modelSortShow = !modelSortShow;">
          <text class="txt">筛选</text>
          <image :src="IMAGE_STATIC+'/images/sort.png'" class="ico" mode="heightFix" />
        </view>
      </view>
      <!-- 本月交易量降序弹窗 -->
      <view v-if="modelDesShow" ref="desPopu" class="model-bg" @tap.stop="modelDesShow = false">
        <view class="modal" @tap.prevent="modelDesShow = true">
          <view class="desPopu">
            <view class="li" @tap.stop="chooseDes(1)">注册时间倒序</view>
            <view class="li" @tap.stop="chooseDes(1)">本月交易量降序</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 列表 -->
    <view  v-if="isShowPage">
      <view class="team-list" v-if="list.length != 0">
        <view v-for="(item) in list" :key="item.id" class="team-item" @tap.stop="$tools.jump('/pages/team/teamDetail',item.id)">
          <view class="img">
            <init-image v-if="item.head_photo" :src="imgShow(item.head_photo)" class="img" mode="" />
            <image v-else :src="IMAGE_STATIC+'/images/logo.png'" class="img" mode="heightFix" />
          </view>
          <view class="content-box">
            <view class="title">
              <text class="name" @tap.stop="callPhone(item.user_tel)">{{ item.real_name?item.real_name:'待实名' }}</text>
              <text>{{ item.user_tel }}</text>
              <text class="leve">V{{ item.grade }}</text>
            </view>
            <view class="content">
              <view class="info">
                <view class="label">团队本月交易额{{ viewCount(item.month_trade_money) }}元</view>
                <view class="label mt-10">团队累计交易额{{ viewCount(item.total_trade_money) }}元</view>
              </view>
              <view class="info">
                <view class="label">团队本月商户数{{ (item.month_merchant_num)}}户</view>
                <view class="label mt-10">团队累计商户数{{ (item.total_merchant_num) }}户</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
    </view>
     <!-- 筛选弹窗 -->
     <view v-if="modelSortShow" ref="sortPopu" class="model-bg" @tap="modelSortShow = false" :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
        <view class="modal" @tap.stop="modelSortShow = true">
          <view class="sortPopu">
            <view class="title">团队成员</view>
            <view class="tab">
              <view :class="[currentIndex == 0 ? 'active' : '', 'item']" @tap="changeTab(0,'01')">全部</view>
              <view :class="[currentIndex == 1 ? 'active' : '', 'item']" @tap="changeTab(1,'02')">直属</view>
            </view>
            <view class="title mt-56">姓名/手机号</view>
            <u--input
            class="form-item-inner border-b"
            placeholder="请输入成员姓名或手机号"
            type="text"
            customStyle="marginLeft:40rpx;marginRight:40rpx;border-radius: 0;width:100%;margin-left:0;font-size:20rpx;"
            border="none"
            v-model="chooseObj.profit"
          ></u--input>
            <view class="title mt-10">注册时间</view>
            <view class="info">
              <view class="label">开始时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
                  @change="startDatePicker">
                  <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择开始时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="info border-b">
              <view class="label">结束时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
                  @change="endDatePicker">
                  <view>{{ chooseObj.endData ? chooseObj.endData : '请选择结束时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="title mt-56">分润</view>
            <view class="tab tab1">
              <view v-for="(item, index) in tabGrade" :key="index" :class="[currentIndex1 == index ? 'active' : '', 'item']"
                @tap="changeTab1(index)">{{ item.name }}</view>
            </view>
            <!-- <view class="title mt-32">认证状态</view>
            <view class="tab tab1">
              <view v-for="(item, index) in tabStatus" :key="index" :class="[currentIndex2 == index ? 'active' : '', 'item']"
                @tap="changeTab2(index)">{{ item.name }}</view>
            </view> -->
            <view class="bottom-box">
              <view class="bottom">
                <view class="btn reset" @tap.stop="reset()">重置</view>
                <view class="btn sure" @tap.stop="sure()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
  </view>
</scroll-view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath, //图片资源
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: false,
      isShowPage: false,
      tab: [
        { name: '全部' },
        { name: '待激活' },
        { name: '已激活' },
      ],
      total: 1,
      list: [
      ],
      modelDesShow: false,
      modelSortShow: false,
      currentIndex: 1,
      chooseObj: {  // 筛选条件
        teamType:'02',
        grade:'',
        userType: '', // 团队成员
        type: '', // 分润
        status: '', // 认证状态
        profit: '',
        startDate: '', //开始时间
        endData: '' //结束时间
      },
      // 选择时间范围
      startDateValid: '1900-01-01',
      // 分润
      tabGrade: [
        { type: 0, name: '全部' },
        { type: 1, name: 'V1' },
        { type: 2, name: 'V2' },
        { type: 3, name: 'V3' },
        { type: 4, name: 'V4' },
        { type: 5, name: 'V5' },
        { type: 6, name: 'V6' },
        { type: 7, name: 'V7' },
        // { type: 8, name: 'V8' },
        // { type: 9, name: 'V9' },
      ],
      currentIndex1: 0,
      // 认证状态
      tabStatus: [
        { type: 0, name: '全部' },
        { type: 1, name: '未实名认证' },
        { type: 1, name: '已实名认证' },
      ],
      currentIndex2: 0,
      statusBarHeight:0,
      sortType:'',// asc 升序 desc 降序 空-恢复默认排序
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    console.log("分页");
    if (this.lsShow == true) {
      this.getRecord();
    } else {
      // return this.$tools.toast('到底了');
    }
  },
  onLoad() {
    this.init()
    const that = this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
  },
  methods: {
    init() {
      this.total = 0
      this.pageIndex = 1;
      this.list = [];
      this.getTotal()
      this.getRecord()
    },
    // 获取总数
    getTotal() {
      var data = {
        team_type:this.chooseObj.teamType,
        key_word:this.chooseObj.profit,
        grade:this.chooseObj.grade,
        start_date:this.chooseObj.startDate,
        end_date:this.chooseObj.endData,
      };
      console.log('data',data)
      this.$Ajax('/api/user/team/getUserTeamInfo', data, res => {
        if (res.success) {
          this.total = res.data.userTeamInfo.team_num
        }
      }, err => {
      }
      )
    },
    getRecord() {
      let that = this;
      var data = {
        team_type:this.chooseObj.teamType,
        key_word:this.chooseObj.profit,
        grade:this.chooseObj.grade,
        start_date:this.chooseObj.startDate,
        end_date:this.chooseObj.endData,
        page_num:this.pageIndex,
        sort:this.sortType,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/user/team/getUserTeamList', data, res => {
        uni.hideLoading();
        this.isShowPage = true
        that.list = that.list.concat(res.data.userTeamList);
        if(that.list.length < that.total){
          // this.lastId = res.data.userTeamList[res.data.userTeamList.length-1].id
          that.pageIndex ++
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
        this.isShowPage = true
      }
      );
    },
    // 排序
    changeSort(){
      if(this.sortType==''){
        this.sortType='asc'
      }else if(this.sortType=='asc'){
        this.sortType='desc'
      }else if(this.sortType=='desc'){
        this.sortType=''
      }
      this.init()
    },
    // 开始时间选择
    startDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.startDate = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) > new Date(this.chooseObj.endData)) {
        this.chooseObj.startDate = this.chooseObj.endData; // 重置开始时间
      } else {
        this.chooseObj.startDate = time;
      }
    },
    // 结束时间选择
    endDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.endData = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) < new Date(this.chooseObj.startDate)) {
        this.chooseObj.endData = this.chooseObj.startDate; // 重置开始时间
      } else {
        this.chooseObj.endData = time;
      }
    },
    // 本月交易量降序选择
    chooseDes(desTpye) {
      this.modelDesShow = false
    },
    // 切换
    changeTab(index,type) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.chooseObj.teamType = type
        // this.init()
      }
    },
    // 切换
    changeTab1(index) {
      if (this.currentIndex1 != index) {
        this.currentIndex1 = index
        if(index==0){
          this.chooseObj.grade =''
        }else{
          this.chooseObj.grade = index
        }
        // this.init()
      }
    },
    // 重置
    reset() {
      this.resFilds()
      this.modelSortShow = false
      this.init()
    },
    sure(){
      this.modelSortShow = false
      this.init()
    },
    // 清空数据
    resFilds(){
      this.currentIndex = 0
      this.currentIndex1 = 0
      this.currentIndex2 = 0
      this.chooseObj = {  // 筛选条件
        teamType: '01', // 团队成员
        grade: '', // 分润
        profit: '',
        startDate:'', //开始时间
        endData: ''  //结束时间
      }
    },
    // 拨打电话
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber, // 电话号码
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.team {
  position: relative;
  min-height: 100vh;
  height: 100%; /* 显式设置父元素高度 */
  &-sort {
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #000000;
    position: relative;
    height: 48rpx;
    line-height: 48rpx;
    box-sizing: border-box;
    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .right {
      @include flexLeft;
    }

    .txt {
      margin-left: 14rpx;
    }
  }
  .search{
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #F1F1F1;
    border-radius: 16rpx;
    padding: 0 30rpx;
    @include flexLeft;
    box-sizing: border-box;
    .ico{
      width: 27rpx;
      height: 27rpx;
      margin-right:26rpx;
    }
    input{
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
    }
  }
  &-scrol {
    overflow: hidden;
  }

  &-item {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #666;
    display: flex;

    .top {
      @include flexBetween;
      padding: 0 28rpx;
      padding-bottom: 32rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .name {
        font-size: 28rpx;
      }
    }

    .img {
      width: 104rpx;
      height: 104rpx;
      border-radius: 100%;
      overflow: hidden;
    }

    .content-box {
      width: calc(100% - 128rpx);
      margin-left: 24rpx;

      .title {
        font-size: 24rpx;
        color: #333;

        .name {
          margin-right: 20rpx;
        }
      }

      .content {
        @include flexBetween;
      }

      .info {
        margin-top: 24rpx;
        width: 50%;

        .label {
          font-size: 24rpx;
          color: #666;
          width: 168rpx;
        }
      }
      .leve{
        padding: 4rpx 20rpx;
        border: 1px solid #AD2926;
        color: #AD2926;
        font-size: 24rpx;
        border-radius: 10rpx;
        margin-left: 10rpx;
      }

      .mt-10 {
        margin-top: 16rpx;
      }

      .info:nth-of-type(1) {
        padding-right: 64rpx;
      }

      .info:nth-of-type(2) {
        padding-left: 64rpx;
        padding-right: 32rpx;
      }
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
